import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Alert: React.FC<{ title: string }> = (props) => {
  return <div>{props.title}</div>;
};

const useAlert = () => {
  const [divElement, setDivElement] = useState<HTMLDivElement>();
  const show = (title: string) => {
    console.log(title, '====');

    if (divElement === undefined) {
      const result = document.createElement('div');
      document.body.appendChild(result);
      setDivElement(result);
      ReactDOM.render(<Alert title={title} />, result);
    }
  };
  const hidden = () => {
    if (divElement) {
      document.body.removeChild(divElement);
      setDivElement(undefined);
    }
  };

  const tiggle = (title: string) => {
    if (divElement) {
      hidden();
    } else {
      show(title);
    }
  };

  return {
    tiggle,
  };
};

export default useAlert;
